<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body class="qq">
  
    <div class="ll">
    <ol><h2>1.键盘焦点</h2>
    <li > <p> 账号：<input class="ou" type="text"></p>
    <p><input class="ou" type="submit" value="确定" /></p> </li>
    <li><p>账号：<input class="po" type="text"></p>
    <p>密码：<input class="po" type="text"></p>
    <input class="po" type="reset" value="清除" />
    <input class="po" type="submit" value="确定" /></li>
    <li><p>搜索 <input class="ww" type="text"><input class="ww" type="reset" value="前进"></p>
    </li>

</ol>
<div class="sc"></div><br>
<div class="s"></div><br>
<div class="xx"></div>
<br><div class="mm"></div><br>

</div>
    <style>
        .qq{
            background-image: url(https://bpic.588ku.com/back_pic/05/85/23/645c7937d1b6cfc.jpg);
            background-repeat: no-repeat;
            background-size:cover;
        }
      .ll{
          border: 1px saddlebrown none;
          width: 300px;
          height: 600px;
          text-align: center;
          margin: auto;
      }
      h2{
          color: thistle;
      }
        
        .ou:focus
        {
            background-color: aqua;
            outline: cadetblue;
            border: 1px red solid;
        }
        .po:focus{
            background-color: rgb(95, 103, 160);
            outline-color: aquamarine;
            border: 0.2rem yellow solid;
        }
        .ww:focus{
            background-color: rgb(207, 23, 121);
            outline-color:salmon ;
            border: 0.2rem rgb(5, 18, 195) solid;
        }
        
        
        div.s{width: 200px;
            height: 200px;
            background-color: tomato;
            margin-top: 10px;
            transition: box-shadow 0.5s;
        }
        div.s:hover{
            box-shadow:5px  5px 5px #c21515,5px -5px 5px #6907aa,-5px 5px 5px #3232d7,-5px -5px 5px #a5a3a3;
        }
        div.xx{
        border: 1px red;
        width: 200px;
        height: 200px;
        background-image:linear-gradient(180deg,rgb(112, 212, 17),green)
    }
    div.xx:hover{
        box-shadow: 3px 3px red, -1em 0 0.4em rgb(12, 143, 219);
    }
    div.sc{
        width: 200px;
        height: 200px;
        background-color: #3232d7;
        transition: box-shadow 0.5s

    }
    div.sc:hover{
        box-shadow: 0.1em 0.2rem salmon, 0.3rem 0.3rem saddlebrown;

    }
    div.mm{
        width: 200px;
        height: 200px;
        background-color: violet;
       transition: opacity 0.6s;
    }
    div.mm:hover{
        border: 1px red solid;
        opacity: 0.5;
    }
    </style>
</body>
</html>